<template>
	<section class="roles">
		<el-button type="primary" style="margin-bottom: 10px" @click="addRole">
			新增
		</el-button>
		<el-table :data="tableData">
			<el-table-column label="头像" width="80px">
				<template #default="scope">
					<el-avatar
						v-if="scope.row.headerImg"
						:size="32"
						:src="addImage(scope.row.headerImg)"
					/>
					<el-avatar v-else :size="32">
						{{ scope.row.userName.split('')[0] }}
					</el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="用户名" />
			<el-table-column prop="nickName" label="昵称" />
			<el-table-column prop="phone" label="手机号" />
			<el-table-column prop="email" label="邮箱" />
			<el-table-column prop="authorityId" label="用户角色">
				<template #default="scope">
					{{ roles[scope.row.authorityId] }}
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template #default="scope">
					<el-tag :type="scope.row.enable === 1 ? 'success' : 'danger'">
						{{ scope.row.enable === 1 ? ' 正常' : '冻结' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template #default="scope">
					<el-popconfirm
						title="是否确定删除当前数据"
						width="200px"
						confirm-button-text="确定"
						cancel-button-text="取消"
						@confirm="delRole(scope.row.id)"
					>
						<template #reference>
							<el-button text type="danger"> 删除 </el-button>
						</template>
					</el-popconfirm>
					<el-button type="success" text @click="updateRole(scope.row)">
						修改
					</el-button>
					<el-button type="primary" text @click="resetPwd(scope.row.id)">
						重置密码
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
			v-model="visible"
			title="角色配置"
			center
			width="400px"
			@close="closeDialog"
		>
			<el-form :model="formData" label-width="80px">
				<el-form-item
					label="用户名"
					prop="userName"
					:rules="[
						{
							required: true,
							message: '用户名不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.userName" :disabled="operate !== 'new'" />
				</el-form-item>
				<el-form-item
					label="昵称"
					prop="nickName"
					:rules="[
						{
							required: true,
							message: '昵称不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.nickName" />
				</el-form-item>
				<el-form-item
					v-if="operate === 'new'"
					label="密码"
					prop="passWord"
					:rules="[
						{
							required: true,
							message: '密码不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.passWord" />
				</el-form-item>
				<el-form-item
					label="角色"
					prop="authorityId"
					:rules="[
						{
							required: true,
							message: '角色不能为空',
							trigger: 'change',
						},
					]"
				>
					<el-select v-model="formData.authorityId" placeholder="请选择角色">
						<el-option
							v-for="item in rolesList"
							:key="item.authorityId"
							:label="item.authorityName"
							:value="item.authorityId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item
					label="状态"
					prop="enable"
					:rules="[
						{
							required: true,
							message: '状态不能为空',
							trigger: 'change',
						},
					]"
				>
					<el-switch
						v-model="formData.enable"
						:active-value="1"
						:inactive-value="2"
					/>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="formData.phone" />
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formData.email" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitRole">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</section>
</template>

<script setup>
import useTableData from '@/util/useTableData.js'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getRolesListApi, resetPasswordApi } from '@/api/api.js'

const visible = ref(false)
const operate = ref('new')

const addImage = (url) => {
	return import.meta.env.VITE_APP_IP + url
}

const { tableData, delRow, addRow, updateRow } = useTableData({
	getList: {
		url: '/user/getUserList',
		params: {
			page: 1,
			pageSize: 999,
		},
	},
})

const roles = reactive({})
const rolesList = ref([])

onMounted(async () => {
	let res = await getRolesListApi()
	rolesList.value = res.list
	res.list.forEach((item) => {
		roles[item.authorityId] = item.authorityName
	})
})

const formData = reactive({
	userName: '',
	nickName: '',
	passWord: '',
	enable: 1,
	authorityId: 666,
	phone: '',
	email: '',
})

const delRole = (id) => {
	delRow('/user/deleteUser', { data: { id: id } }, 'delete')
}

const resetPwd = async (id) => {
	try {
		await resetPasswordApi({ id: id })
		ElMessage.success('重置成功')
	} catch (err) {
		throw new Error(err)
	}
}

const addRole = () => {
	operate.value = 'new'
	visible.value = true
}

const updateRole = (params) => {
	operate.value = 'update'
	visible.value = true
	Object.assign(formData, params)
}

const closeDialog = () => {
	Object.keys(formData).forEach((item) => {
		if (
			item === 'userName' ||
			item === 'nickName' ||
			item === 'passWord' ||
			item === 'phone' ||
			item === 'email'
		) {
			formData[item] = ''
		} else if (item === 'enable') {
			formData.enable = 1
		} else if (item === 'authorityId') {
			formData.authorityId = 666
		} else {
			delete formData[item]
		}
	})
}

const submitRole = async () => {
	try {
		if (operate.value === 'new') {
			await addRow('/user/admin_register', formData)
		} else {
			await updateRow('/user/setUserInfo', formData)
		}
		closeDialog()
		ElMessage.success('配置成功')
		visible.value = false
	} catch (err) {
		console.log(err)
	}
}
</script>

<style scoped>
.roles {
	padding: 10px 20px;
}
:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
:deep(.el-input-number) {
	width: 100%;
}
</style>
